<template>
	<view v-if="show" class="sol-tabbar" @touchmove.stop.prevent="() => {}">
		<view class="sol-tabbar__content safe-area-inset-bottom" :style="{
			height: height,
			backgroundColor: bgColor,
		}" :class="{
			'sol-tabbar__content__top': borderTop
		}">
			<view class="sol-tabbar__content__item" v-for="(item, index) in list" :key="index"
				@tap.stop="switchTab(index)" :style="{
				backgroundColor: bgColor
			}">
				<view class="sol-tabbar__content__item__button" :style="showText? '':'top: unset;'">
					<image class="sol-tabbar__content__item__icon" :src="elIconPath(index)" mode="scaleToFill"></image>
					<text class="sol-tabbar__content__item__badge" v-if="item.count > 0 && !item.isDot">{{item.count < 99 ? item.count : '99+'}}</text>
					<text class="sol-tabbar__content__item__badge sol-tabbar__content__item__badge-dot" v-if="item.isDot"></text>
				</view>
				<view class="sol-tabbar__content__item__text" :style="{
					color: elColor(index)
				}" v-if="showText">
					<text class="line-1">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 根据uview tabbar改
	export default {
		name: "sol-tabbar",
		props: {
			// 显示与否
			show: {
				type: Boolean,
				default: true
			},
			// 通过v-model绑定current值
			value: {
				type: [String, Number],
				default: 0
			},
			// 整个tabbar的背景颜色
			bgColor: {
				type: String,
				default: '#50585e'
			},
			// tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位
			height: {
				type: [String, Number],
				default: '50px'
			},
			// 激活时的演示，包括字体图标，提示文字等的演示
			activeColor: {
				type: String,
				default: '#dddddd'
			},
			// 未激活时的颜色
			inactiveColor: {
				type: String,
				default: '#878787'
			},
			// 配置参数
			list: {
				type: [Array, Object],
				default () {
					return []
				}
			},
			// 是否显示顶部的横线
			borderTop: {
				type: Boolean,
				default: true
			},
			// 是否隐藏原生tabbar
			hideTabBar: {
				type: Boolean,
				default: true
			},
			// 显示底部文字
			showText: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				pageUrl: '', // 当前页面URL
			}
		},
		computed: {
			elIconPath() {
				return (index) => {
					// 历遍u-tabbar的每一项item时，判断是否传入了pagePath参数，如果传入了
					// 和data中的pageUrl参数对比，如果相等，即可判断当前的item对应当前的tabbar页面，设置高亮图标
					// 采用这个方法，可以无需使用v-model绑定的value值
					let pagePath = this.list[index].pagePath;
					// 如果定义了pagePath属性，意味着使用系统自带tabbar方案，否则使用一个页面用几个组件模拟tabbar页面的方案
					// 这两个方案对处理tabbar item的激活与否方式不一样
					if (pagePath) {
						if (pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) {
							return this.list[index].selectedIconPath;
						} else {
							return this.list[index].iconPath;
						}
					} else {
						// 普通方案中，索引等于v-model值时，即为激活项
						return index == this.value ? this.list[index].selectedIconPath : this.list[index].iconPath
					}
				}
			},
			elColor() {
				return (index) => {
					// 判断方法同理于elIconPath
					let pagePath = this.list[index].pagePath;
					if (pagePath) {
						if (pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) return this.activeColor;
						else return this.inactiveColor;
					} else {
						return index == this.value ? this.activeColor : this.inactiveColor;
					}
				}
			}
		},
		created() {
			uni.showLoading({
				mask: true
			});
			// 是否隐藏原生tabbar
			if (this.hideTabBar) uni.hideTabBar();
			// 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/"
			let pages = getCurrentPages();
			// 页面栈中的最后一个即为项为当前页面，route属性为页面路径
			this.pageUrl = pages[pages.length - 1].route;
		},
		mounted() {
			uni.hideLoading()
		},
		methods: {
			// 切换tab
			switchTab(index) {
				// 发出事件和修改v-model绑定的值
				this.$emit('change', index);
				// 如果有配置pagePath属性，使用uni.switchTab进行跳转
				if (this.list[index].pagePath) {
					uni.switchTab({
						url: this.list[index].pagePath
					})
				} else {
					// 如果配置了papgePath属性，将不会双向绑定v-model传入的value值
					// 因为这个模式下，不再需要v-model绑定的value值了，而是通过getCurrentPages()适配
					this.$emit('input', index);
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	$--content-color: #606266;
	$--top-color: rgba(255, 255, 255, 0.3);

	.sol-tabbar {
		&__content {
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 50;
			box-sizing: content-box;

			&__top {
				// box-shadow: 0px -4px 4px $--top-color;
				border-top-left-radius: 28rpx;
				border-top-right-radius: 28rpx;
				overflow: hidden;
			}

			&__item {
				flex: 1;
				height: 100%;
				padding: 12rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				&__button {
					position: absolute;
					top: 14rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				&__icon {
					width: 64rpx;
					height: 64rpx;
				}

				&__badge {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #DDDDDD;
					background-color: #ad4242;
					padding: 6rpx 12rpx;
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 9;
					top: -2rpx;
					right: -12px;
					position: absolute;

					&-dot {
						padding: 12rpx;
					}
				}

				&__text {
					color: $--content-color;
					font-size: 26rpx;
					line-height: 28rpx;
					position: absolute;
					bottom: 14rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 100%;
					text-align: center;
				}
			}


		}
	}
</style>
